<template>
<div>
    <el-steps :space="200" :active="active" finish-status="success">
        <el-step title="提交申请" :status="status1"></el-step>
        <el-step title="审核中" :status="status2"></el-step>
        <el-step title="审核结果" :status="status3"></el-step>
        <!-- status:wait / process / finish / error / success -->
    </el-steps>
    <el-button @click="updateStatus">更新状态</el-button>
</div>
    
</template>

<script>
export default {
    name: 'status',
    data(){
        return {
            active: 0, // 初始状态为提交申请
            status1:'success',
            status2:'wait',
            status3:'wait'
        };    
    },
    methods:{
        updateStatus() {
            // 增加计数器
            this.active++;
            
            // 检查计数器是否超过最大值
            if (this.active > 2) {
                // 重置计数器为零
                this.active = 0;
            }
            
            //使active在0，1，2循环
            if(this.active == 0){
                this.status1='success';
                this.status2='finsh';
                this.status3='wait';
            }else if(this.active == 1){
                this.status1='success';
                this.status2='success';
                this.status3='finsh';
            }else{
                this.status1='success';
                this.status2='success';
                this.status3='success';
            }
        }
    }
}
</script>

<style>

</style>